<template>
<div class="reset">
	
		 			
		 			<div class="user-box" >
		 				<div class="error-item" v-show="errMsg">
		 					<i class="iconfont icon-warning "></i>
		 					<p class="error-msg">{{errMsg}}</p>
		 				</div>

		 				<div class="step-con step-username" v-show="stepOne">
		 					<p class="user-item-text">请输入用户名</p>
			 				<div class="user-item">
				 				<label class="user-label" for="username"><i class="iconfont icon-account" ></i>
				 				</label>
				 				<input class='user-content' ref="username" v-model="username"  @focus="movetosight($event)" placeholder="请输入用户名" autocomplete="off">

			 				</div>
			 				
			 				<div  class="btn btn-submit" id="submit-username" @click="resetUsername()">下一步</div>
		 				</div> 
		 				
		 				<div class="step-con step-question" v-show="stepTwo" >
		 					<p class="user-item-text">密码提示问题是: <span class="question">{{question}}</span></p>
			 				<div class="user-item">
				 				<label class="user-label" for=""><i class="iconfont icon-success" ></i>
				 				</label>
				 				<input class='user-content' ref="answer" v-model="answer"	placeholder="请输入答案"  @focus="movetosight($event)" autocomplete="off">
 
			 				</div>
			 				
			 				<div  class="btn btn-submit" id="submit-question" @click="resetAnswer()">下一步</div>
		 				</div> 

		 				<div class="step-con step-password" v-show="stepThree" >
		 					<p class="user-item-text">请输入新密码</p>
			 				<div class="user-item">
				 				<label class="user-label" for="password"><i class="iconfont icon-password" ></i>
				 				</label>
				 				<input type='password' class='user-content' ref="password"  v-model="password"  @focus="movetosight($event)" placeholder="请输入新密码" autocomplete="off">

			 				</div>
			 				
			 				<div  cldivss="btn btn-submit" id="submit-password" @click="resetPassword()">下一步</div>
		 				</div> 
		 				
		 				</div>
		 			</div> 
	
</div>
</template>

<script>
import 'common/css/iconfont.css';
var _user   =require("common/util/server/userServer.js");
var _mm     =require("common/util/mm.js");
export default {


  name: 'reset',
  methods:{
  	movetosight(e){
  		let _this=this;
  			let panel=e.target;
  			setTimeout(function(){
  				panel.scrollIntoView(true);
  				panel.scrollIntoViewIfNeeded();
  			},200);
  	},
  	resetUsername(){
  			let _this=this;
  			if (!_mm.validate(this.username,'require')) {
			
			this.errMsg ='用户名不能为空';
			

		}else{
			_user.getQuestion({username:this.username},
				function(res){
					_this.errMsg="";
					_this.question=res.data;
					_this.stepOne=false;
					_this.stepTwo=true;

			},function(err){
				_this.errMsg=err.msg;

			})
		};
	 },
  	resetAnswer(){
  		let _this=this;
  			if (!_mm.validate(this.answer,'require')) {
			
			this.errMsg ='问题答案不能为空';
			

		}else{
			_user.checkAnswer({username:this.username,
							question:this.question,
							answer:this.answer
			},
				function(res){
					_this.errMsg="";
					_this.token=res.data;
					_this.stepTwo=false;
					_this.stepThree=true;

			},function(err){
				_this.errMsg=err.msg;

			})
		};
  	},
  	resetPassword(){
  		let _this=this;
  			if (!_mm.validate(this.password,'require')) {
			
			this.errMsg ="密码不能为空";
			

		}else{
			_user.resetPassword({username:this.username,
								passwordNew:this.password,
								forgetToken:this.token

								},
				function(res){
					_this.errMsg="";
					window.alert("修改成功");
					_mm.goHome();
					
			},function(err){
				_this.errMsg=err.msg;

			})
		};
  	},
  	},
  data () {

    return {
    	errMsg:false,
    	stepOne:true,
    	stepTwo:false,
    	stepThree:false,
    	username:"",
    	answer:"",
    	password:"",
    	token:'',
    	question:"",
    }
  }
}
</script>

<style lang="stylus" scoped>
.user-box
	width:80%;
	margin:0 auto;
	.error-item
		margin-bottom:10px
		height:80px
		width:100%
		border:.5px solid rgb(222,64,43)	
		text-align:center
		color:rgb(222,64,43)	
		background:#fde9e9
	.step-con
		width:100%
		height:auto
		.user-item-text
			font-size:24px
			color:rgb(222,64,43)
			text-align:center
		.user-item
			width:100%
			height:auto
			margin-bottom:10px
			border:.5px solid #bdbdbd
			color:#d3d3d3
			font-size:0
			.user-label
				display:inline-block
				border-right:.5px solid #bfbfbf
				height:30px
				width:10%
				text-align:center 
				line-height:30px
				background:#f3f3f3
				font-size:18px
			.user-content
				height:30px
				vertical-align:top
				width:85%
				display:inline-block
				padding:0
				border:0
				outline:none
				font-size:18px
		.btn
			height:50px
			width:100%
			background:rgb(222,64,43)
			color:white
			font-size:24px
			text-align:center
			line-height:50px
	
</style>